import React, { useState } from 'react';
import { DeleteOutlined } from '@ant-design/icons';
import Container from 'components/Container';
import Button from 'components/BtnComponent';
import Close from 'assets/Icon/Choreographer/Close';
import Open from 'assets/Icon/Choreographer/Open';

import renderOptionInput from './Input';
import {
  nameValidator,
  propertyValidator,
  // descValidator,
} from './validator';

import styles from './index.module.less';

const OptionTitle = ({ visible, text, onClick }) => (
  <Container flex alignItems="center" onClick={onClick} className={styles.optionTitle}>
    {visible ? <Close /> : <Open />}
    <span style={{ marginLeft: 8 }}>{text}</span>
  </Container>
);

const RenderParam = ({
  defaultInput,
  inputParamKey,
  setInputParamKey,
  setInputParamList,
}) => {
  const [visible, setVisible] = useState(false);
  const [paramList, setParamList] = useState([]);
  const paramOptions = [
    {
      name: '名称',
      formInputName: 'name',
      required: true,
      rules: nameValidator,
    },
    {
      name: '标识',
      formInputName: 'property',
      rules: propertyValidator,
    },
    {
      name: '类型',
      formInputName: 'type',
      isSelect: true,
      initialValue: 'string',
      options: [
        {
          id: 'string',
          name: 'string',
        },
        {
          id: 'number',
          name: 'number',
        },
        {
          id: 'int',
          name: 'int',
        },
        {
          id: 'boolean',
          name: 'boolean',
        },
        {
          id: 'array',
          name: 'array',
        },
        {
          id: 'object',
          name: 'object',
        },
      ],
    },
    {
      name: '默认值',
      formInputName: 'default',
    },
  ];

  const addParam = () => {
    const list = paramList.concat([{ paramKey: inputParamKey }]);
    setInputParamKey(inputParamKey + 1);
    setParamList(list);
    setInputParamList(list);
  };

  const deleteParam = (keyIndex) => {
    const key = paramList.findIndex(item => item.paramKey === keyIndex);
    const list = [...paramList];
    list.splice(key, 1);
    setParamList(list);
    setInputParamList(list);
  };

  // 初始化参数
  React.useEffect(() => {
    if (defaultInput && defaultInput.length) {
      setInputParamKey(defaultInput[defaultInput.length - 1].paramKey + 1);
      setInputParamList(defaultInput);

      setParamList(defaultInput);
    }
  }, [defaultInput]);

  return (
    <Container>
      <OptionTitle visible={visible} text="参数" onClick={() => { setVisible(!visible); }} />
      <Container className={!visible && styles.none}>
        {paramList.map(paramItem => (
          <Container key={paramItem.paramKey} style={{ padding: '0 12px', position: 'relative' }}>
            <Container style={{ background: '#181C25', padding: '12px 0px', marginBottom: '12px' }}>
              {paramOptions.map(item => (
                item && renderOptionInput(item, `param${paramItem.paramKey}_${item.formInputName}`)
              ))}
            </Container>
            <DeleteOutlined
              onClick={() => { deleteParam(paramItem.paramKey); }}
              style={{
                position: 'absolute', top: '14px', right: '30px', color: '#5E728C',
              }}
            />
          </Container>
        ))}
        <Button style={{ marginBottom: '12px', marginLeft: '12px' }} onClick={addParam}>添加参数</Button>
      </Container>
    </Container>
  );
};

const StartAction = ({
  formRef,
  submit,
  defaultInput,
  onClose,
}) => {
  const [inputParamKey, setInputParamKey] = React.useState(0);
  const [inputParamList, setInputParamList] = React.useState([]);
  const basic = {
    name: '节点名称',
    labelRequired: true,
    formInputName: 'startName',
    rules: nameValidator,
    disabled: true,
  };

  const renderFooter = () => (
    <Container flex justify="flex-end" style={{ padding: '0 12px 12px 0' }}>
      <Button type="gray" style={{ marginRight: '12px' }} onClick={onClose}>取消</Button>
      <Button onClick={() => { submit({ inputParamList }); }}>确定</Button>
    </Container>
  );

  return (
    <div>
      {renderOptionInput(basic, basic.formInputName)}
      {RenderParam({
        formRef,
        defaultInput,
        inputParamKey,
        setInputParamKey,
        setInputParamList,
      })}
      {renderFooter()}
    </div>
  );
};

export default StartAction;
